import HeaderComponent from "@/components/HeaderComponent/HeaderComponent";

import { CalendarPicker, InfiniteScroll, Picker, Popup } from "antd-mobile";
import { RightOutline } from "antd-mobile-icons";
import { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import "./RewardRecord.less";
import InfiniteScrollContent from "@/components/InfiniteScrollContentComponent/InfiniteScrollContentComponent";

import { getRewardRecord } from "@/api/module/user";

const AssetsComponent: FC<{
  allAmount: number;
}> = ({ allAmount }) => {
  const { t } = useTranslation();
  return (
    <div className="mt-4">
      <div className="flex items-center justify-between asstest mx-2 bg-bg-1 py-4 px-4 rounded-xl"></div>
      <div className="value text-white-1 py-8 px-5 bg-custom-gradient-1 rounded-xl relative -top-4 flex items-center justify-center">
        <div>
          <div className="opacity-50">{t("total")}</div>
          <div className="text-2xl font-semibold text-center">{allAmount}</div>
        </div>
      </div>
    </div>
  );
};
const LogsComponent: FC<{
  loadMore: (isRetry: boolean) => Promise<void>;
  hasMore: boolean;
  data: Array<any>;
}> = ({ loadMore, hasMore, data }) => {
  const { t } = useTranslation();
  const [startDate, setStartDate] = useState<[Date, Date] | null>();
  const [visible1, setVisible1] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [pickerVisible, setPickerVisible] = useState(false);
  const typeColumns = [
    [
      { label: "周期 1", value: "1" },
      { label: "周期 2", value: "2" },
      { label: "周期 3", value: "3" },
      { label: "周期 4", value: "4" },
      { label: "周期 5", value: "5" },
    ],
  ];
  const [pickerValue, setPickerValue] = useState<(string | null)[]>();
  const [pickerShowInfo, setPickerShowInfo] = useState<{
    label: string;
    value: string;
  }>();
  const confirmSearch = () => {
    console.log(pickerValue, startDate);
  };
  return (
    <div className="mt-4">
      <div className="flex justify-between items-center">
        <div className="tab flex font-semibold">{t("rewardRecord")}</div>

        {/* <div onClick={() => setVisible1(true)} className="text-font-2">
          {t('filter')}
        </div> */}
      </div>
      <div className="logs mt-4 text-sm">
        <div className="text-white-1 mb-4">
          <div>
            <div className="logs-tab-content overflow-y-scroll">
              {data.map((item) => (
                <div key={item.id} className="py-2 bg-bg-1 mb-2 p-4 rounded-lg">
                  <div className="flex justify-between items-center">
                    {/* <div className="w-1/2">
                      {t("orderSn")}: {item.order_sn}
                    </div> */}
                    {/* <div className="w-1/2">
                      {t("ID")}: {item.order_id}
                    </div> */}
                  </div>
                  <div className="flex justify-between items-center mt-2 mb-1">
                    <div className="w-1/2">
                      {t("reward")}: {item.remark}
                    </div>
                    <div className="w-1/2">
                      {t("amountOfMoney")}:
                      <span className="text-font-2"> {item.reward_amount}</span>
                    </div>
                  </div>
                  {/* <div className="detail">
                    {t("detail")}: {item.type}
                  </div> */}
                  <div className="date mt-2">
                    {t("date")}: {item.add_time}
                  </div>
                </div>
              ))}
              <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                <InfiniteScrollContent hasMore={hasMore} />
              </InfiniteScroll>
            </div>
          </div>
        </div>
      </div>
      <Popup
        visible={visible1}
        position="right"
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
        bodyStyle={{ width: "60vw" }}
      >
        <div className="px-4 py-6">
          <div onClick={() => setVisible2(true)} className="date">
            <div className="select-date font-bold text-lg">选择时间</div>
            <div>
              {startDate?.length ? (
                <div>
                  {startDate[0].getFullYear() +
                    "-" +
                    startDate[0].getMonth() +
                    "-" +
                    startDate[0].getDate()}
                  <span className="mx-2">——</span>
                  {startDate[1].getFullYear() +
                    "-" +
                    startDate[1].getMonth() +
                    "-" +
                    startDate[1].getDate()}
                </div>
              ) : (
                "请选择时间"
              )}
            </div>
          </div>
          <div className="type">
            <div className="select-type mt-4 font-bold text-lg">种类</div>
            <div
              onClick={() => setPickerVisible(true)}
              className="flex justify-between items-center"
            >
              <span>
                {!pickerValue?.length ? "请选择种类" : pickerShowInfo?.label}
              </span>
              <RightOutline />
            </div>
          </div>

          <div className="flex justify-between text-center font-bold absolute w-full bottom-0 left-0 py-4 px-4">
            <div
              onClick={() => confirmSearch()}
              className="bg-bg-16 text-white-1 flex-1 rounded-full py-2"
            >
              {t("confirm")}
            </div>
            <div
              onClick={() => {
                setStartDate(null);
                setPickerValue([]);
                setPickerShowInfo({
                  label: "",
                  value: "",
                });
              }}
              className="flex-1  rounded-full py-2 bg-bg-18 ml-4 text-white-1"
            >
              {t("reset")}
            </div>
          </div>
        </div>
      </Popup>
      <CalendarPicker
        visible={visible2}
        selectionMode="range"
        value={startDate}
        max={new Date()}
        min={new Date("2024-12-01")}
        className={`calendar-custom`}
        renderTop={(_) => {
          return <div className="hidden"></div>;
        }}
        onClose={() => setVisible2(false)}
        onMaskClick={() => setVisible2(false)}
        onChange={(val) => {
          console.log(val);
          setStartDate(val);
        }}
      />
      <Picker
        cancelText={t("cancel")}
        confirmText={t("confirm")}
        columns={typeColumns}
        visible={pickerVisible}
        onClose={() => {
          setPickerVisible(false);
        }}
        value={pickerValue}
        onConfirm={(v, extend) => {
          // @ts-ignore
          setPickerValue(v);
          // @ts-ignore
          setPickerShowInfo((val) => {
            return {
              ...val,
              ...extend.items[0],
            };
          });
          console.log(v, extend.items);
        }}
      />
    </div>
  );
};
export default function RewardRecord() {
  const param = useParams();
  console.log(param);
  const [allAmount, setAllAmount] = useState(0);
  const [page, setPage] = useState(1);
  const [data, setData] = useState<
    Awaited<ReturnType<typeof getRewardRecord>>["data"]["list_data"]
  >([]);
  const [hasMore, setHasMore] = useState(true);

  async function loadMore() {
    const res = await getRewardRecord(page + "");
    res.code = setAllAmount(res.data.total_reward);
    setPage(page + 1);
    setData((val) => [...val, ...res.data.list_data]);
    setHasMore(res.data.total_page > +res.data.page_on);
  }

  return (
    <div className="text-white-1 px-4">
      <HeaderComponent title="rewardRecord" />
      <AssetsComponent allAmount={allAmount} />
      <LogsComponent loadMore={loadMore} hasMore={hasMore} data={data} />
    </div>
  );
}
